<template>
  <section>
    <!--<el-button size="mini" type="text" @click="test">测试2</el-button>-->
    <el-form label-width="100px" size="mini" v-if="goodsBase">
      <el-form-item label="商品名称：">
        <el-input size="mini" v-model="goodsBase.title" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="商品类型：">
        <el-select size="mini" v-model="goodsBase.goodsTypeId"  @change="selGoodsTypeEvent" v-if="typeList">
          <el-option v-for="type in typeList" :key="type.id" :value="type.id" :label="type.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型：">
        <business-type :code="goodsBase.data.businessTypeCode" v-on:selType="goodsBase.data.businessTypeCode = $event"></business-type>
      </el-form-item>
      <el-form-item label="基本属性：" v-if="goodsBase.goodsTypeId">
        <sel-prop :typeData="goodsBase.data"/>
      </el-form-item>
      <el-form-item label="商品主图：" v-if="goodsBase.id">
        <el-button size="mini" type="text" @click="setPhotosBtn">设置({{goodsBase.goodsPhoto?JSON.parse(goodsBase.goodsPhoto.data).length:'0'}}/5)</el-button>
      </el-form-item>
      <el-form-item label="" >
        <el-row style="float: right">
          <el-button size="mini" type="success" @click="confirmBtn(goodsBase)" :type="goodsBase.id?'primary':'success'">{{goodsBase.id?'保存':'新建'}}</el-button>
        </el-row>
      </el-form-item>
    </el-form>
    <el-dialog title="图片管理" :visible.sync="goodsPhotosDialog" width="50%" append-to-body>
      <goods-photo :photos="photos" v-on:savePhotos="savePhotos"></goods-photo>
    </el-dialog>
  </section>
</template>

<script>
  import selProp from '@/common/selProp'
  import businessType from '@/common/businessType'
  import goodsPhoto from './goodsPhoto'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newMallGoods",
    components:{goodsPhoto,businessType,selProp},
    props:['goodsBase'],
    data() {
      return {
        typeList:null,
        goodsPhotosDialog:false,
        propList:[{key:'地址',val:false,code:'needAddress'},{key:'用户',val:false,code:'needCustomerId'}],
        photos:[]
      }
    },
    watch:{
      goodsBase(nv,ov){
        console.log('-----',nv)
        if(nv) {
          console.log('new里看看会不会更新----',nv)
          if(this.goodsBase.goodsPhoto) this.photos=JSON.parse(this.goodsBase.goodsPhoto.data)
          // if(nv.goodsTypeId) this.makeDataUi(nv.goodsType.data.props)
          // this.init(nv)
        }
      }
    },
    created(){
      console.log('create--goodsBase------------------',this.goodsBase)
      this.getMallGoodsTypeList()//加载商品类型
      if(this.goodsBase.goodsPhoto) this.photos= JSON.parse(this.goodsBase.goodsPhoto.data)
      // if(this.goodsBase.goodsTypeId) this.makeDataUi(this.goodsBase.goodsType.data.props)
      // this.init(this.mallGoods)
      console.log('解析过的photos------',this.photos)
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      savePhotos(e){
        console.log('先看有没有id-----',this.goodsBase)
        console.log('再看数组',e)
        if(!this.goodsBase.id){
          this.$message({type:'error',message:'请先创建商品！'})
          return
        }
        if(this.goodsBase.goodsPhoto){
          //保存
          let data={id:this.goodsBase.goodsPhoto.id,data:JSON.stringify(e)}
          this.updateGoodsPhoto(data)
        }else {
          let data={goodsId:this.goodsBase.id,data:JSON.stringify(e)}
          this.createGoodsPhoto(data)
        }
      },
      createGoodsPhoto(data){
        this.fetch({name:"createGoodsPhoto",data})
          .then(res=>{
            console.log('创建商品图片成功-------',res,this.goodsBase)
            this.$message({type:'success',message:'新建成功！'})
            Vue.set(this.goodsBase,'goodsPhoto',res)
            this.photos=JSON.parse(res.data)
            console.log('看新建后的照片------',this.photos)
            this.goodsPhotosDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateGoodsPhoto(data){
        this.fetch({name:"updateGoodsPhoto",data})
          .then(res=>{
            console.log('更新商品图片成功-------',res,this.goodsBase)
            this.$message({type:'success',message:'更新成功！'})
            this.goodsBase.goodsPhoto.data=res.data
            this.photos=JSON.parse(res.data)
            console.log('看更新后的照片------',this.photos)
            this.goodsPhotosDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setPhotosBtn(){
        console.log('photos-------',this.photos)
        this.goodsPhotosDialog=true
      },
      test(){
        console.log('测试2----------',this.goodsBase)
        this.goodsBase.id=2
        this.$emit('newSuccess',this.goodsBase)
      },
      getMallGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList",data:{storeId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.typeList = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmBtn(e){
        if(e.id){
          //更新
          this.updateMallGoods(e)
        }else {
          //新建
          this.createMallGoods(e)
        }
      },
      selGoodsTypeEvent(e){
        let currType=this.typeList.find(type=>type.id === e)
        let data={props:currType.data.props,businessTypeCode:currType.businessTypeCode}
        this.goodsBase.data.props={...currType.data.props}
        Vue.set(this.goodsBase,'data',data)
        // this.goodsBase.data.businessTypeCode=currType.businessTypeCode
        console.log('看下goodsBase----------',this.goodsBase)
        // this.makeDataUi(this.goodsBase.data.props)
      },
      makeDataUi(obj){
        this.propList.forEach(prop=>{
          prop.val=false//初始化一下
          for(let key in obj){
            if(prop.code === key){
              prop.val=obj[key]
            }
          }
        })
        console.log(this.propList)
      },
      createMallGoods(row){
        this.fetch({name:"createMallGoods",data:{...row}})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'新建成功！'})
            this.$emit('newSuccess',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateMallGoods(row){
        console.log('更新-------------')
        this.fetch({name:"updateMallGoods",data:{...row}})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功！'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
</style>
